<template>
  <div class="home">
    <div class="sidebar-menu-con" :style="sidebarMenuStyle">
      <div class="logo-con">
        <img v-show="!hideMenuText"  src="./img/logo.jpg">
        <img v-show="hideMenuText" src="./img/logo-min.jpg">
      </div>

      <sidebar-menu v-if="!hideMenuText"></sidebar-menu>
      <sidebar-menu-shrink v-else></sidebar-menu-shrink>
    </div>

    <div class="home-header-con" :style="{paddingLeft: hideMenuText?'60px':'200px'}">
      <div class="home-header">
        <div class="navicon-con">
          <Button
            type="text"
            :style="{transform: 'rotateZ(' + (this.hideMenuText ? '-90' : '0') + 'deg)'}"
            @click="toggleClick">
            <Icon type="ios-menu" size="32"></Icon>
          </Button>
        </div>
        <div class="header-middle-con">
          <breadcrumb-nav></breadcrumb-nav>
        </div>
        <div class="header-avator-con">
          <div class="user-dropdown-menu-con">
            <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
              <Dropdown trigger="click" @on-click="handleClickUserDropdown">
                <a href="javascript:void(0)">
                  <span class="home-user-name">gykj_admin</span>
                  <Icon color="#2d8cf0" type="md-arrow-dropdown" />
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem name="ownSpace">个人中心</DropdownItem>
                  <DropdownItem name="loginout" divided>退出登录</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <Avatar src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg" style="background: #619fe7;margin-left: 10px;"></Avatar>
            </Row>
          </div>
        </div>
      </div>
    </div>

    <div class="home-router-con" :style="{left: hideMenuText?'60px':'200px'}">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
import sidebarMenu from './child/sidebar-menu'
import sidebarMenuShrink from './child/sidebar-menu-shrink'
import breadcrumbNav from './child/breadcrumb-nav'

export default {
  computed: {
    sidebarMenuStyle () {
      return {
        width: this.hideMenuText ? '60px' : '200px',
        overflow: this.hideMenuText ? 'visible' : 'auto'
      }
    }
  },
  data () {
    return {
      hideMenuText: false
    }
  },
  methods: {
    toggleClick () {
      this.hideMenuText = !this.hideMenuText
    },
    handleClickUserDropdown (name) {
      console.log(name)
    }
  },
  components: {
    'sidebar-menu': sidebarMenu,
    'sidebar-menu-shrink': sidebarMenuShrink,
    'breadcrumb-nav': breadcrumbNav
  }
}
</script>

<style lang="scss" scoped>
  .home {
    width: 100%;
    height: 100%;
    position: absolute;
    .sidebar-menu-con {
      height: 100%;
      z-index: 100;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #495060;
      user-select: none;
      .logo-con{
        padding: 8px;
        img{
          width: 100%;
        }
      }
    }
    .home-header-con {
      box-sizing: border-box;
      position: fixed;
      z-index: 100;
      display: block;
      padding-left: 200px;
      width: 100%;
      box-shadow: 0 2px 1px 1px hsla(0, 0%, 39%, .1);
      .home-header {
        height: 60px;
        background: #fff;
        box-shadow: 0 2px 1px 1px hsla(0,0%,39%,.1);
        position: relative;
        z-index: 11;
        .navicon-con {
          margin: 6px;
          display: inline-block;
          .ivu-btn-text {
            &:focus {
              box-shadow: 0 0 0 0;
            }
          }
        }
        .header-middle-con {
          position: absolute;
          left: 60px;
          top: 0;
          right: 340px;
          bottom: 0;
          padding: 10px;
          overflow: hidden;
        }
        .header-avator-con {
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          width: 300px;
          .user-dropdown-menu-con {
            position: absolute;
            right: 0;
            top: 0;
            width: 150px;
            height: 100%;
            .home-user-name{
              display: inline-block;
              width: 78px;
              vertical-align: middle;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: right;
              color: #2d8cf0;
            }
            .user-dropdown-innercon {
              height: 100%;
              padding-right: 14px;
            }
          }
        }
      }
    }
    .home-router-con {
      position: fixed;
      top: 60px;
      bottom: 0;
      right: 0;
      overflow: hidden;
      z-index: 99;
    }
  }
</style>
